// 路由组件
import React from 'react';
import { HashRouter, Switch, Route, Redirect } from 'react-router-dom'
import Login from "../Login/Login";
import {inject,observer} from "mobx-react";
// const {quxnian}   = Login
@inject('myStore')
@observer
class permissionRouter extends React.Component {
    util =(allRouter)=>{
        // console.log(allRouter)
        return allRouter.map((route,i)=>{
            // 这里写路由守卫
            // 根据权限渲染我们的动态路由
            // 全部渲染写判断
            if (route.meta&&route.meta.require){ /* 要登录*/
                // 登录的同时还要 判断身份和路由权限是否匹配
                if (this.props.myStore.user.isLogin){
                    // 用户已经登录
                    const permissions =this.props.myStore.user.permission  /*用户的登录者权限*/
                    const roles =route.role  /*页面的权限*/
                    if (roles.includes(permissions)){
                        // 随便进入
                        if (route.children) {
                            if(this.props.myStore.user.permission==='admin'){
                                return <Route key={route.name} path={route.path} render={() =>
                                    <route.component {...this.props}>
                                        {this.util(route.children)}
                                        <Route key={route.name} path={route.path} render={() => <Redirect to='/myNav/dataAnalysis' />} />
                                    </route.component>
                                }>
                                </Route>
                            }else if(this.props.myStore.user.permission==='merchants'){
                                return <Route key={route.name} path={route.path} render={() =>
                                    <route.component {...this.props}>
                                        {this.util(route.children)}
                                        <Route key={route.name} path={route.path} render={() => <Redirect to='/myNav/dataAnalysis1' />} />
                                    </route.component>
                                }>
                                </Route>
                            } else if(this.props.myStore.user.permission==='operate'){
                                return <Route key={route.name} path={route.path} render={() =>
                                    <route.component {...this.props}>
                                        {this.util(route.children)}
                                        <Route key={route.name} path={route.path} render={() => <Redirect to='/myNav/groupList2' />} />
                                    </route.component>
                                }>
                                </Route>
                            }else if(this.props.myStore.user.permission==='service'){
                                return <Route key={route.name} path={route.path} render={() =>
                                    <route.component {...this.props}>
                                        {this.util(route.children)}
                                        <Route key={route.name} path={route.path} render={() => <Redirect to='/myNav/groupList3' />} />
                                    </route.component>
                                }>
                                </Route>
                            }
                            return <Route key={route.name} path={route.path} render={() =>
                                <route.component {...this.props}>
                                    {this.util(route.children)}
                                    <Route key={route.name} path={route.path} render={() => <Redirect to={route.redirect} />} />
                                </route.component>
                            }>
                            </Route>
                        }
                        else{
                            return <Route key={route.name} exact path={route.path} component={route.component} />
                        }
                    }else {
                        return (<Route key={route.name} path={route.path} component={Login}/>)
                    }
                }else{
                    // 未登录但是想进登录页面
                    return (<Redirect key={route.name} to='/myNav' />)
                }
                // 判断登陆的权限是否和路由匹配
            }else if(route.redirect){
                return (<Route key={route.name}  path={route.path} exact render={()=><Redirect to={route.redirect} />} />)
            }else {
                return (<Route key={route.name} path={route.path} component={route.component} />)
            }
        })
    }
    render() {
        let {allRouter}=this.props
        return (
            <HashRouter>
                <Switch>
                    {/*渲染我们的路由*/}
                    {this.util(allRouter)}
                </Switch>
            </HashRouter>
        )
    }
}

export default permissionRouter